<template>
    <div class="item">
        <div class="title text-[20px]">智能座舱域控制器电源解决方案</div>
        <div class="flex justify-around">
        <div class="img-box relative">
            <img :src="_5_5x.src" alt="">
            <span class="w-[61px] h-[24px] bg-brown inline-block text-white box-border text-center rounded-[8px] absolute top-[35%] left-[31%] hover:underline cursor-pointer">
                <a href="/productDetailInfoData">
                ES5415</a></span>
            <span class="w-[61px] h-[24px] bg-brown inline-block text-white box-border text-center rounded-[8px] absolute top-[67%] left-[31%] hover:underline cursor-pointer"><a href="/productDetailInfoData">ES5415</a></span>

            <span class="w-[61px] h-[24px] bg-brown inline-block text-white box-border text-center rounded-[8px] absolute top-[79.3%] left-[61.4%] hover:underline cursor-pointer"><a href="/productDetailInfoData">ES5415</a></span>
            <span class="w-[61px] h-[24px] bg-brown inline-block text-white box-border text-center rounded-[8px] absolute top-[91.7%] left-[61.4%] hover:underline cursor-pointer"><a href="/productDetailInfoData">ES5415</a></span>


        </div>
        <div class="w-[426px] pl-[18px] relative">
            <div class="w-[1px] h-full bg-f8 absolute left-[4px]"></div>
            <div class="mb-[9px]">域控制器</div>
            <div class="mb-[19px]">域控制器为车身座舱提供了……</div>
          <ul class="tabs">
            <li 
            v-for="(item, index) in tabList" 
            class="mr-[14px] hover:text-brown" 
            :class="{'active': activeTab==index}" 
            @click="handleCheckItem(index)">{{ item.label }}</li>
          </ul>
          <div v-if="activeTab==0">
            <ul>
                <li v-for="item in productList" class="mt-[10px]">
                    <div class="flex">
                        <span class="text-brown">{{ item.id }}</span>
                        <span>-{{ item.des }}</span>
                    </div>
                    <div class="flex">数据表 <span class="text-brown">PDF</span>|<span class="text-brown">HTML</span></div>
                </li>
            </ul>
          </div>
        <div v-if="activeTab==1">
            <ul class="mt-[20px]">
                <li class="mt-[10px] pb-[10px]">ES5030-基于jacinto adas处理器的多传感器平台参考设计</li>
                <li class="mt-[10px] pb-[10px]">设计指南：.PDF | .HTML    图解的：.PDF</li>
            </ul>
        </div>
        <div v-if="activeTab==2">
            <ul class="mt-[20px]">
                <li class="mt-[10px] pb-[10px]">白皮书</li>
                <li class="mt-[10px] pb-[10px] text-brown">使用Einno的嵌入式低功耗深度学习</li>
            </ul>
        </div>
        </div>
    </div>
    </div>
 </template>
 <script setup>
import _5_5x from "@assets/automotiveElectronics/5_5x.png";
import { ref } from 'vue'
const activeTab = ref(0)
const tabList = ref([
    {label: '产品'},
    {label: '参考设计'},
    {label: '技术文档'},
])
const productList = ref([
   {
    id: 'ES5415',
    des: '适用于汽车座舱的域控制器',
   },
   {
    id: 'ES5030',
    des: '适用于汽车座舱的域电源控制器',
   }

])
const handleCheckItem = (index) => {
    activeTab.value = index
    console.log(activeTab.value, index)
}
</script>
 <style lang="scss" scoped>
.img-box{
    width: 701px;
    height: 350px;
    img{
        width: 100%;
        height: 100%;
    }
}
li{
    border-bottom: 1px solid #D8D5D5;
}
.tabs{
    border-bottom: 1px solid #D8D5D5;
    display: flex;
    justify-content: left;
    li{
        padding-bottom: 9px;
        border-bottom: 1px solid transparent;
        cursor: pointer;
       &:hover{
            border-bottom-color: #712C2F;
        }
        &.active{
            border-bottom-color: #712C2F;
        }   
    }
}
.item{
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
    padding: 20px;
    box-sizing: border-box;
    margin-top: 24px;
}
</style>